<template>
    <div>
       
        <div class="top1">
        <!--上面大框架-->
        <div style="text-align: center;">
        <h3 >歌单1</h3>
        </div>
        <div class="top2">
        <div >
            <img src="https://img2.baidu.com/it/u=1370543161,4217018937&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            width="150px"
            height="150px"
            />
        </div>
        <div class="jianjie">
            <h4>林秋离随笔：偷走你的心，写情歌</h4>
            <div class="zuozhe">作者：折倦鸟</div>
        </div>
        </div>
        <div class="icon">
            <div class="icon1">
        <van-icon name="share-o" size="30" color="#696969" />
        </div>
            <div class="icon2">
        <van-icon name="add-o" size="30" color="#696969"/></div>
            <div class="icon3">
        <van-icon name="thumb-circle-o" size="30" color="#696969"/>
            </div>
            <div class="icon4">
        <van-icon name="like-o" size="30" color="#696969" />
            </div>
            <div class="icon5">
                <van-icon name="comment-o"  size="30" color="#696969"/>
            </div>
        </div>
        </div>
        <div class="song">
        <div class="song1">
            <!--下方详情-->
            <div>
                <img src="https://img0.baidu.com/it/u=2816616005,756652884&fm=253&fmt=auto&app=138&f=JPEG?w=666&h=500"
                alt=""
                />
            </div>
            <div class="songname">
                江南<br>
                <div style="font-size: smaller;color: burlywood;">林俊杰</div>
            </div>
            <div class="right">
                <van-icon name="ellipsis" />
            </div>
        </div>
        <div class="song2">
            <!--下方详情-->
            <div>
                <img src="https://img2.baidu.com/it/u=4095926110,3851325729&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"
                alt=""
                />
            </div>
            <div class="songname">
                girls<br>
                <div style="font-size: smaller;color: burlywood;">aspea</div>
            </div>
            
            <div class="right">
                <van-icon name="ellipsis" />
            </div>
        </div>
        <div class="song3">
            <!--下方详情-->
            <div>
                <img src="https://img0.baidu.com/it/u=3573444636,1303234618&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                alt=""
                />
            </div>
            <div class="songname">
                Howyoulike<br>
                <div style="font-size: smaller;color: burlywood;">blackpink</div>
            </div>
            <div class="right">
                <van-icon name="ellipsis" />
            </div>
        </div>
        <div class="song4">
            <!--下方详情-->
            <div>
                <img src="https://img1.baidu.com/it/u=2991042480,2944111155&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                alt=""
                />
            </div>
            <div class="songname">
                好日子<br>
                <div style="font-size: smaller;color: burlywood;">iu</div>
            </div>
            <div class="right">
                <van-icon name="ellipsis" />
            </div>
        </div>
        <div class="song5">
            <!--下方详情-->
            <div>
                <img src="https://img2.baidu.com/it/u=4016388835,4109706535&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                alt=""
                />
            </div>
            <div class="songname">
                Heart<br>
                <div style="font-size: smaller;color: burlywood;">winter,peizhuxuan</div>
            </div>
            <div class="right">
                <van-icon name="ellipsis" />
            </div>
        </div>
        <div class="song6">
            <!--下方详情-->
            <div>
                <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.S1NwsVkLWWDxvAoZYtWbXgHaHa?w=206&h=206&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                alt=""
                />
            </div>
            <div class="songname">
                Monster<br>
                <div style="font-size: smaller;color: burlywood;">Thnfj</div>
            </div>
            <div class="right">
                <van-icon name="ellipsis" />
            </div>
        </div>
        <div class="song7">
            <!--下方详情-->
            <div>
                <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.UmomNBFvJ8nl_s0sQux6LQHaE8?w=229&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                alt=""
                />
            </div>
            <div class="songname">
                MyWorld<br>
                <div style="font-size: smaller;color: burlywood;">justinbieber</div>
            </div>
            <div class="right">
                <van-icon name="ellipsis" />
            </div>
        </div>
        <div class="song8">
            <!--下方详情-->
            <div>
                <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.nzwEWW5luGt5-c5X0Nhc5wHaHa?w=176&h=191&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                alt=""
                />
            </div>
            <div class="songname">
                save<br>
                <div style="font-size: smaller;color: burlywood;">dsbbuh</div>
            </div>
            <div class="right">
                <van-icon name="ellipsis" />
            </div>
        </div>
    </div>
    </div>
</template>
<script setup>

</script>
<style scoped>
 .content {
    padding: 16px 16px 160px;
  }
.zuozhe{
    margin-top: 10px;
}
.top2{
    display: flex;
}
.top2 .jianjie{
    margin-top: 10px;
    margin-left: 10px;
}
.song{
    width: 100%;
    height: 600px;
   
    background-color: rgb(255, 255, 255);
}
.icon{
    display: flex;
    align-items: center;
    margin-top: 10px;
    justify-content: space-between;
}

/*.icon{
    display: flex;
    align-items: center;
    justify-content: space-between;
}*/

.top1{
    width: 100%;
    height: 240px;
  
}
.song1,
.song2,
.song3,
.song4,
.song5,
.song6,
.song7,
.song8
{
    display: flex;
    align-items: center;
}
.song1 img,
.song2 img,
.song3 img,
.song4 img,
.song5 img,
.song6 img,
.song7 img,
.song8 img
{
    width: 45px;
    height: 45px;
    margin-top: 15px;
    margin-left: 10px;
}
.song1 .songname,
.song2 .songname,
.song3 .songname,
.song4 .songname,
.song5 .songname,
.song6 .songname,
.song7 .songname,
.song8 .songname
{
    margin-left: 10px;
    margin-bottom: 5px;
    margin-top: 20px;

}
.song1 .right,
.song2 .right,
.song3 .right,
.song4 .right,
.song5 .right,
.song6 .right,
.song7 .right,
.song8 .right
{
    margin-left: 245px;
}
/*
.song1.song2,.song3{
   display: flex;
    align-items: center;
    background-color: rgb(253, 254, 255);

}
.song1 .right,
.song2 .right,
.song3 .right
{
    margin-left: 250px;
}
.song1 .songname{
    margin-left: 10px;
    margin-bottom: 5px; 
}
.song2 .songname,
.song3 .songname
{
    margin-left: 10px;
    margin-bottom: 5px;
}
.song1 img{
    margin-top: 4px;
    margin-left: 4px;
    width: 40px;
    height: 40px;
}
.song2 img,
.song3 img
{
    margin-top: 4px;
    margin-left: 4px;
    width: 40px;
    height: 40px;
}*/
</style>